//Cell.js
import React, { Component } from 'react';
import CommData from "./commData";
export default class CommCellView extends Component {
    constructor(props) {
        super(props)
        this.state = {
        }
       // this.display = this.determineDisplay({ x: props.colNo, y: props.rowNo }, props.commValue)
        this.timer = 0
        this.delay = 200
        this.prevent = false
    }

    getCommData(valueObj,x,y,executeFormula) {
        return <CommData  valueObj={valueObj} x={x} y={y} executeFormula={executeFormula}/>;
    }


    /**
     * Before updating, execute the formula on the Cell value to calculate the
     * `display` value. Especially useful when a redraw is pushed upon this cell
     * when editing another cell that this might depend upon
     */
    componentWillUpdate() {
        this.display =this.determineDisplay({ x: this.props.colNo, y: this.props.rowNo }, this.props.commValue)
    }




    /**
     * Executes the formula calculation on the cell value
     */
    determineDisplay = ({ x, y }, valueObject) => {
        //if (valueObject.text.slice(0, 1) === '=') {
            if (valueObject.slice(0, 1) === '=') {
            //const res = this.props.executeFormula({ x, y }, valueObject.text.slice(1))
            const res = this.props.executeFormula({ x, y }, valueObject.slice(1))
            if (res.error !== null) {
                return 'INVALID'
            }
            return res.result
        }
        //return valueObject.text
        return valueObject;
    }


    /**
     * Executes the formula calculation on the cell value
     */
    determineDisplayText = ({ x, y }, valueText) => {
        if (valueText.slice(0, 1) === '=') {
            const res = this.props.executeFormula({ x, y }, valueText.slice(1))
            if (res.error !== null) {
                return 'INVALID'
            }
            return res.result
        }
        return valueText
    }




    /**
     * Add listener to the `eventA` event used to broadcast the
     * eventA all event
     */
    componentDidMount(){
        window.document.addEventListener('eventA', this.handleeventA)
    }



    render() {
        let x=this.props.colNo;
        let y=this.props.rowNo;
        let executeFormula=this.props.executeFormula;
       let alignCss = this.props.commAlign === 1 ? 'cell_align_left' : ( this.props.commAlign === 2 ? 'cell_align_center' : 'cell_align_right')
       let cell_font_family_css='cell_font-family_microYH';
       let cell_font_size_css='cell_font_size_medium'
       let cell_font_weight_css= 'font-normal'
       let cell_font_style_css= 'font-sytle_normal'
       //5、划线
       let cell_text_decoration_css= 'none'
       let cell_border_top_css= 'cell_border_top_init'
       let cell_border_bottom_css= 'cell_border_bottom_init'
       let cell_border_left_css= 'cell_border_left_init'
       let cell_border_right_css= 'cell_border_right_init'
       let cell_cell_filter_brightness_css= 'cell_filter_brightness_1'


        switch(this.props.commcell_font_cssArray[0]) {
            case 'microYH':
                cell_font_family_css='cell_font-family_microYH'
                break;
            case 'st':
                cell_font_family_css='cell_font-family_st'
                break;
            case 'xst':
                cell_font_family_css='cell_font-family_xst'
                break;
            case 'ht':
                cell_font_family_css='cell_font-family_ht'
                break;
            case 'fs':
                cell_font_family_css='cell_font-family_fs'
                break;
            case 'kt':
                cell_font_family_css='cell_font-family_kt'
                break;
            default:
                cell_font_family_css='cell_font-family_st'
        }

        switch(this.props.commcell_font_cssArray[1]) {
            case 'medium':
                cell_font_size_css='cell_font_size_medium'
                break;
            case 'small':
                cell_font_size_css='cell_font_size_small'
                break;
            case 'large':
                cell_font_size_css='cell_font_size_large'
                break;
            case 'x-small':
                cell_font_size_css='cell_font_size_x-small'
                break;
            case 'x-large':
                cell_font_size_css='cell_font_size_x-large'
                break;
            case 'xx-large':
                cell_font_size_css='cell_font_size_xx-large'
                break;
            default:
                cell_font_size_css='cell_font_size_medium'
        }

        switch(this.props.commcell_font_cssArray[2]){
            case 'font-weight_normal':
                cell_font_weight_css='cell_font-weight_normal'
                break;
            case 'font-weight_bold':
                cell_font_weight_css='cell_font-weight_bold'
                break;
            default:
                cell_font_weight_css='cell_font-weight_normal'
        }


        switch(this.props.commcell_font_cssArray[3]){
            case 'font-sytle_normal':
                cell_font_style_css='cell_font-style_normal'
                break;
            case 'font-sytle_italic':
                cell_font_style_css='cell_font-style_italic'
                break;
            default:
                cell_font_style_css='cell_font-style_normal'
        }


        switch(this.props.commcell_font_cssArray[4]){
            case 'overline':
                cell_text_decoration_css='cell_font_text-decoration_overline'
                break;
            case 'line-through':
                cell_text_decoration_css='cell_font_text-decoration_line-through'
                break;
            case 'underline':
                cell_text_decoration_css='cell_font_text-decoration_underline'
                break;
            case 'blink':
                cell_text_decoration_css='cell_font_text-decoration_blink'
                break;
            case 'none':
                cell_text_decoration_css='cell_font_text-decoration_none'
                break;
            default:
                cell_font_style_css='cell_font_text-decoration_none'
        }

        switch(this.props.commborder_top){
            case '0':
                 cell_border_top_css= 'cell_border_top_view'
                break;
            case '1':
                cell_border_top_css= 'cell_border_top_none'
                break;
            case '2':
                cell_border_top_css= 'cell_border_top_thin'
                break;
            case '3':
                cell_border_top_css= 'cell_border_top_thick'
                break;

            case 0:
                cell_border_top_css= 'cell_border_top_view'
                break;
            case 1:
                cell_border_top_css= 'cell_border_top_none'
                break;
            case 2:
                cell_border_top_css= 'cell_border_top_thin'
                break;
            case 3:
                cell_border_top_css= 'cell_border_top_thick'
                break;


            default:
                cell_border_top_css='cell_border_top_view'
        }
        switch(this.props.commborder_bottom){
            case '0':
                cell_border_bottom_css= 'cell_border_bottom_view'
                break;
            case '1':
                cell_border_bottom_css= 'cell_border_bottom_none'
                break;
            case '2':
                cell_border_bottom_css= 'cell_border_bottom_thin'
                break;
            case '3':
                cell_border_bottom_css= 'cell_border_bottom_thick'
                break;

            case 0:
                cell_border_bottom_css= 'cell_border_bottom_view'
                break;
            case 1:
                cell_border_bottom_css= 'cell_border_bottom_none'
                break;
            case 2:
                cell_border_bottom_css= 'cell_border_bottom_thin'
                break;
            case 3:
                cell_border_bottom_css= 'cell_border_bottom_thick'
                break;



            default:
                cell_border_bottom_css='cell_border_bottom_view'
        }
        // switch(this.props.commborder_bottom){
        //     case 0:
        //         cell_border_bottom_css= 'cell_border_bottom_init'
        //         break;
        //     case 1:
        //         cell_border_bottom_css= 'cell_border_tottom_none'
        //         break;
        //     case 2:
        //         cell_border_bottom_css= 'cell_border_tottom_thin'
        //         break;
        //     case 3:
        //         cell_border_bottom_css= 'cell_border_tottom_thick'
        //         break;
        //     default:
        //         cell_border_bottom_css='cell_border_tottom_init'
        // }

        switch(this.props.commborder_left){
            case '0':
                cell_border_left_css= 'cell_border_left_view'
                break;
            case '1':
                cell_border_left_css= 'cell_border_left_none'
                break;
            case '2':
                cell_border_left_css= 'cell_border_left_thin'
                break;
            case '3':
                cell_border_left_css= 'cell_border_left_thick'
                break;


            case 0:
                cell_border_left_css= 'cell_border_left_view'
                break;
            case 1:
                cell_border_left_css= 'cell_border_left_none'
                break;
            case 2:
                cell_border_left_css= 'cell_border_left_thin'
                break;
            case 3:
                cell_border_left_css= 'cell_border_left_thick'
                break;


            default:
                cell_border_left_css='cell_border_left_view'
        }
        switch(this.props.commborder_right){
            case '0':
                cell_border_right_css= 'cell_border_right_view'
                break;
            case '1':
                cell_border_right_css= 'cell_border_right_none'
                break;
            case '2':
                cell_border_right_css= 'cell_border_right_thin'
                break;
            case '3':
                cell_border_right_css= 'cell_border_right_thick'
                break;

            case 0:
                cell_border_right_css= 'cell_border_right_view'
                break;
            case 1:
                cell_border_right_css= 'cell_border_right_none'
                break;
            case 2:
                cell_border_right_css= 'cell_border_right_thin'
                break;
            case 3:
                cell_border_right_css= 'cell_border_right_thick'
                break;


            default:
                cell_border_right_css='cell_border_right_view'
        }

        switch(this.props.commaddFilter_bright){
            case 0:
                cell_cell_filter_brightness_css='cell_filter_brightness_1'
                break;
            case 1:
                cell_cell_filter_brightness_css='cell_filter_brightness'
                break;
            default:
                cell_cell_filter_brightness_css='cell_filter_brightness_1'
        }
      let _rowSpan=this.props.cell_struct_model[0];
      let _colSpan=this.props.cell_struct_model[1];
        //alert(this.props.commcellBackgroundColor);
       console.log ("this.props.commData:"+this.props.commValue.text+";_rowSpan:"+_rowSpan+";_colSpan:"+_colSpan);

        if(this.props.commData==0){
            return null;
        }else{

            if(this.props.commCell_editing_mode==0){
            return (

                <td  className="ttdView"
                     // onClick={e => this.clicked(e)}
                     // onDoubleClick={e => this.doubleClicked(e)}
                     className={["ttdView", alignCss,cell_font_family_css,cell_font_size_css,
                         cell_font_weight_css, cell_font_style_css,cell_text_decoration_css,
                         cell_border_top_css,cell_border_right_css,cell_border_bottom_css,cell_border_left_css,
                         cell_cell_filter_brightness_css].join(' ')}
                     rowSpan={_rowSpan}
                     colSpan={_colSpan}
                     style={{backgroundColor: this.props.commcellBackgroundColor}}
                >
                    {this.getCommData(this.props.commValue,x,y,executeFormula)}
                </td>
            )

            }
        }
    }
}
